<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本转语音演示</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 100px;
            margin-bottom: 10px;
        }
        select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }
        button {
            background-color: #409EFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #66b1ff;
        }
        button:disabled {
            background-color: #a0cfff;
            cursor: not-allowed;
        }
        .status {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #f0f9eb;
            color: #67c23a;
        }
        .error {
            background-color: #fef0f0;
            color: #f56c6c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文本转语音演示</h1>
        <div class="form-group">
            <label for="text">输入文本：</label>
            <textarea id="text" placeholder="请输入要转换的文本"></textarea>
        </div>
        <div class="form-group">
            <label for="langType">选择语言：</label>
            <select id="langType">
                <option value="en">英语</option>
                <option value="zh-CHS">中文</option>
            </select>
        </div>
        <div class="form-group">
            <label for="token">认证Token：</label>
            <input type="text" id="token" placeholder="请输入Bearer Token" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
        </div>
        <button onclick="convertAndPlay()" id="convertBtn">转换并播放</button>
        <div id="status" class="status" style="display: none;"></div>
    </div>

    <script>
        let audio = null;

        async function convertAndPlay() {
            const text = document.getElementById('text').value.trim();
            const langType = document.getElementById('langType').value;
            const token = document.getElementById('token').value.trim();
            const statusDiv = document.getElementById('status');
            const convertBtn = document.getElementById('convertBtn');

            if (!text) {
                showStatus('请输入要转换的文本', 'error');
                return;
            }

            if (!token) {
                showStatus('请输入Bearer Token', 'error');
                return;
            }

            convertBtn.disabled = true;
            showStatus('正在转换...', 'info');

            try {
                // 停止当前正在播放的音频
                if (audio) {
                    audio.pause();
                    audio = null;
                }

                const response = await axios.post('http://localhost:8001/api/tts/convert', 
                    { text, langType },
                    {
                        headers: {
                            'Authorization': `Bearer ${token}`,
                            'Content-Type': 'application/json'
                        },
                        responseType: 'blob'
                    }
                );

                if (response.data.type === 'audio/mp3') {
                    const audioUrl = URL.createObjectURL(response.data);
                    audio = new Audio(audioUrl);
                    audio.onended = () => {
                        URL.revokeObjectURL(audioUrl);
                    };
                    audio.play();
                    showStatus('转换成功！', 'success');
                } else {
                    const reader = new FileReader();
                    reader.onload = () => {
                        const errorResponse = JSON.parse(reader.result);
                        showStatus(`转换失败：${errorResponse.message || '未知错误'}`, 'error');
                    };
                    reader.readAsText(response.data);
                }
            } catch (error) {
                showStatus(`转换失败：${error.message}`, 'error');
            } finally {
                convertBtn.disabled = false;
            }
        }

        function showStatus(message, type) {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = message;
            statusDiv.style.display = 'block';
            statusDiv.className = `status ${type}`;
        }
    </script>
</body>
</html>